<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>在线编码/解码 - M博客</title>
    <meta name="keywords" content="Unicode编码,Unicode解码,URL编码,URL解码" />
    <meta name="description" content="在线编码解码工具可以使用帮助你对网址和中英文进行Unicode编码与Unicode解码、URL编码、URL解码" />
    <link rel="stylesheet" href="http://tv.speechb.com/lib/superui/content/ui/global/bootstrap/css/bootstrap.min.css"/>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .tab_box {
            width: 500px;
            height: 200px;
            border: 1px solid #ccc;
            margin: 50px auto;
            overflow: hidden;
        }
        .tab_box ul {
            width: 600px;
            height: 40px;
            margin-left: -1px;
            list-style: none;
        }
        .tab_box li {
            float: left;
            width: 101px;
            height: 40px;
            text-align: center;
            font: 600 14px/40px "simsun";
            cursor: pointer;
        }

        @media (min-width: 1200px) {
            .tab_box {
                width: 1200px;
                height: 500px;
                border: 1px solid #ccc;
                margin: 50px auto;
                overflow: hidden;
                padding: 12px 0 0 0;
            }

            .tab_box ul {
                width: 1200px;
                height: 40px;
                margin-left: -1px;
                list-style: none;
                border-bottom: 1px solid #c6cede;

            }

            .tab_box li {
                float: left;
                width: 120px;
                height: 40px;
                text-align: center;
                font: 600 14px/40px "simsun";
                cursor: pointer;
            }

            .tab_box span {
                display: none;
                width: 1160px;
                background-color: white;
                margin: 0 auto;
            }
        }

        .tab_box textarea {
            margin: 0px 6px 6px 0;
            height: 360px;
            padding: 12px;
        }

        .tab_box .show {
            display: block;
        }

        .tab_box .current {
            background-color: white;
            border-top: 2px solid #56688a;
            border-left: 1px solid #c6cede;
            border-right: 1px solid #c6cede;
            border-bottom: 1px solid #fff;
        }

    </style>

</head>

<body>
<div th:replace="web/app/header"></div>
<div class="tab_box">
    <ul>
        <li class="current">Unicode编码</li>
        <li>URL编码/解码</li>
        <li>Html编码/解码</li>
        <li>Unix时间戳</li>
    </ul>
    <span class="show">
        <div>
            <textarea id="unicode_input" style="width:49%;float: left" placeholder="请输入Unicode" ></textarea>
            <textarea id="unicode_print" style="width:49%;float: right" placeholder="请输入Unicode" ></textarea>

        </div>
        <button id="unicodeDecode" class="btn-primary">Unicode编码</button>
        &nbsp;
        <button id="unicodeEncode" class="btn-primary">Unicode解码</button>

    </span>
    <span >
          <div>
            <textarea id="url_input" style="width:49%;float: left" placeholder="请输入url码" ></textarea>
            <textarea id="url_print" style="width:49%;float: right" placeholder="请输入url码" ></textarea>

        </div>
        <button id="urlDecode" class="btn-primary">url编码</button>
        &nbsp;
        <button id="urlEncode" class="btn-primary">url解码</button>
    </span>
    <span >
         <div>
            <textarea id="html_input" style="width:49%;float: left" placeholder="请输入html码" ></textarea>
            <textarea id="html_print" style="width:49%;float: right" placeholder="请输入html码" ></textarea>

        </div>
        <button id="htmlDecode" class="btn-primary">html编码</button>
        &nbsp;
        <button id="htmlEncode" class="btn-primary">html解码</button>
    </span>
    <span >4</span>
</div>

<script src="http://tv.speechb.com/lib/superui/content/ui/global/jQuery/jquery.min.js"></script>
<script>
    window.onload = function() {
        var liList = document.getElementsByClassName("tab_box")[0].getElementsByTagName("li");
        var spanList = document.getElementsByTagName("span");

        for(var i = 0, len = liList.length; i < len; i++) {
            liList[i].index = i;
            liList[i].onmouseover = function() {
                for(var j = 0; j < len; j++) {
                    liList[j].className = "";
                    spanList[j].className = "";
                }
                this.className = "current";
                spanList[this.index].className = "show";
            }
        }
    }
    //转码 unicode
    function encodeUnicode (str) {
        var res = [];
        for (var i = 0; i < str.length; i++) {
            res[i] = ("00" + str.charCodeAt(i).toString(16)).slice(-4);
        }
        return "\\u" + res.join("\\u");
    }

    // 解码
    function decodeUnicode (str) {
        str = str.replace(/\\/g, "%");
        return unescape(str);
    }

    $("#unicodeDecode").click(function () {
       var val = $("#unicode_input").val();
       $("#unicode_print").val(encodeUnicode(val));
    });

    $("#unicodeEncode").click(function () {
        var val = $("#unicode_input").val();
        $("#unicode_print").val(decodeUnicode(val));
    });

    $("#urlDecode").click(function () {
        var val = $("#url_input").val();
        $("#url_print").val(encodeURI(val));
    });

    $("#urlEncode").click(function () {
        var val = $("#url_input").val();
        $("#url_print").val(decodeURI(val));
    });


    var HtmlUtil = {
        /*1.用浏览器内部转换器实现html编码（转义）*/
        htmlEncode:function (html){
            //1.首先动态创建一个容器标签元素，如DIV
            var temp = document.createElement ("div");
            //2.然后将要转换的字符串设置为这个元素的innerText或者textContent
            (temp.textContent != undefined ) ? (temp.textContent = html) : (temp.innerText = html);
            //3.最后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串了
            var output = temp.innerHTML;
            temp = null;
            return output;
        },
        /*2.用浏览器内部转换器实现html解码（反转义）*/
        htmlDecode:function (text){
            //1.首先动态创建一个容器标签元素，如DIV
            var temp = document.createElement("div");
            //2.然后将要转换的字符串设置为这个元素的innerHTML(ie，火狐，google都支持)
            temp.innerHTML = text;
            //3.最后返回这个元素的innerText或者textContent，即得到经过HTML解码的字符串了。
            var output = temp.innerText || temp.textContent;
            temp = null;
            return output;
        }
    };

    $("#htmlDecode").click(function () {
        var val = $("#html_input").val();
        $("#html_print").val(HtmlUtil.htmlDecode(val));
    });

    $("#htmlEncode").click(function () {
        var val = $("#html_input").val();
        $("#html_print").val(HtmlUtil.htmlEncode(val));
    });
</script>
</body>
</html>